<template>
	<view>
		<view class="search flex align">
			<!-- <view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;">
				<u-icon name="arrow-left" size="20"></u-icon>
			</view> -->
			<u-search bgColor="#F3F3F3" :actionStyle="actionStyle" placeholder="输入活动名称" :showAction="true"
				v-model="keyword" @custom="toSearch()"></u-search>
		</view>
		<swiper class="swiper" circular indicator-active-color="#fff" :indicator-dots="indicatorDots"
			:autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<view style="position: relative;width: 100%;height: 100%;">
					<image :src="item.path" mode="aspectFill" @click="toPre(item.path,item.url)">
					</image>
					<view class="swiper-title flex align">
						<!-- <u-icon name="map-fill" color="#fff"></u-icon> -->
						{{item.title}}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="content">
			<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'
				@onMouthClick="onMouthClick"></ren-calendar>
			<!-- <view class="change">选中日期：{{curDate}}</view> -->
			<view class="title">活动列表</view>
			<view class="list flex" @click="toUrl(item)" v-for="(item,index) in list" :key="index">
				<image class="cover" :src="item.cover" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{item.name}}</view>
					<!-- 	<view class="tabs flex align">
		   			<view v-for="(item2,index) in item.tags" :key="index">{{item2}}</view>
		   		</view> -->
					<view class="flex align between address" style="margin-bottom: 10rpx;">
						<view class="ponit flex align">
							<u-icon name="clock-fill"></u-icon>
							<view class="view" style="margin-left: 5rpx;">{{item.activity_time_desc}}</view>
						</view>
					</view>
					<view class="flex align between address">
						<view class="ponit flex align">
							<u-icon name="map-fill"></u-icon>
							<view class="view" style="margin-left: 5rpx;">{{item.address}}</view>
						</view>
					</view>
				</view>
				<view class="status" v-if="item.average_price!=0&&item.average_price!=null">￥{{item.average_price}}
					<text style="font-size: 20rpx;">/人</text>
				</view>
			</view>
			<uni-load-more :status="status" v-if="!empty" :content-text="loadText"></uni-load-more>
			<xw-empty :isShow="empty" text="暂无活动" textColor="#777777"></xw-empty>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import {
		activityCalendar,
		gourmetList,
		positionDetail,
		shopCategory,
		activityLists,
		positionList
	} from '@/api/apiData.js';
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 3050,
				duration: 500,
				curDate: '',
				markDays: [],
				actionStyle: {
					color: '#00BB9B'
				},
				keyword: '',
				currentIndex: 0,
				categoryList: [],
				totalPage: 1,
				page: 0,
				offset: 10,
				list: [],
				scrollTop: 0,
				empty: false,
				loadText: {
					loadmore: '点击或上拉加载更多',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				status: 'loadmore',
				mouth: '',
				banner: '',
				ws: null,
				path: '/pages/activity/activity',
				bannerList: []
			}
		},
		onReady() {
			this.getBanner()
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.mouth = this.$refs.ren.y + '-' + this.$refs.ren.m
			this.getData()
			this.getlist()
		},
		onLoad() {},
		onShow() {
			this.connectWebSocket()
		},
		onShareAppMessage(){
			
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			toPre(i, url) {
				if (url == '') {
					let images = []
					this.bannerList.forEach(item => {
						images.push(item.path)
					})
					console.log(images)
					uni.previewImage({
						urls: images,
						current: i
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}

			},
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				uni.connectSocket({
					url: wsUrl,
					success: function(res) {
						console.log('WebSocket连接成功');
						that.sendData({
							type: 'page_enter',
							path: that.path,
							params: ""
						});
					},
					fail: function(err) {
						console.error('WebSocket连接失败', err);
					}
				});
			},
			// 发送
			sendData(data) {
				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: function(res) {
						console.log('消息发送成功');
					},
					fail: function(err) {
						console.error('消息发送失败', err);
					}
				});
			},
			async getBanner() {
				const result = await positionList({
					position_id: 29
				})
				if (result.code == 1) {
					this.bannerList = result.data
				}
			},
			toUrl(i) {
				// uni.navigateTo({
				// 	url: '/pages/activity/detail?id=' + i.id
				// })
				if (i.is_jump == 1) {
					if (i.jump_config.wx_gzh.link != '') {
						wx.openOfficialAccountArticle({
							url: i.jump_config.wx_gzh.link, // 此处填写公众号文章连接
							success: res => {},
							fail: res => {}
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/activity/detail?id=' + i.id
					})
				}
			},
			async getData() {
				const result = await activityCalendar({
					date: this.mouth
				})
				if (result.code == 1) {
					let list = result.data
					let arr = []
					list.forEach(item => {
						if (item.activity_count != 0) {
							arr.push(item.date)
						}
					})
					this.markDays = arr
				}
			},
			onDayClick(data) {
				this.curDate = data.date;
				this.page = 0
				this.list = []
				this.getlist()
			},
			onMouthClick(y, m) {
				this.mouth = y + '-' + m
				this.getData()
			},
			toReturn() {
				uni.navigateBack()
			},
			handleTop() {
				uni.pageScrollTo({
					scrollTop: 0, // 滚动到页面顶部
					duration: 300 // 滚动动画持续时间，单位为毫秒
				});
			},
			toSearch() {
				this.page = 0
				this.list = []
				this.getlist()
			},
			async getList2() {
				const result = await activityLists({
					name: this.keyword,
					activity_date: this.curDate
				})
				if (result.code == 1) {
					this.list = result.data
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'error'
					})
				}
			},
			async getlist() {
				const that = this;
				const {
					totalPage,
					page,
					offset,
					list,
					curDate,
					keyword,
					category_id
				} = that;
				let obj = {
					size: offset,
					page: page + 1,
					name: keyword,
					activity_date: curDate
				};
				that.status = 'loading';
				if (totalPage > page) {
					let result = await activityLists(obj);
					if (result.code == 1) {
						that.page = page + 1;
						if (result.data.total == 0) {
							that.empty = true;
							that.status = 'nomore';
							return;
						}
						that.empty = false;
						setTimeout(() => {
							that.status = 'loadmore';
						}, 500);
						that.list = list.concat(result.data.list);
						if (category_id == '') {
							that.banner = that.list[0].cover
						}
						that.totalPage = Math.ceil(result.data.total / offset);
					}
				} else {
					setTimeout(() => {
						that.status = 'nomore';
					}, 500);
				}
			},
		},
		// onPageScroll(e) {
		// 	const that = this;
		// 	that.scrollTop = e.scrollTop;
		// 	// 监听页面滚动事件
		// 	if (e.scrollTop >= 100) {
		// 		this.showBack = true; // 滚动距离超过100px时显示返回顶部按钮
		// 	} else {
		// 		this.showBack = false; // 否则隐藏返回顶部按钮
		// 	}
		// },
		onReachBottom() {
			const that = this;
			that.getlist();
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
		padding-bottom: 50rpx;
	}

	.swiper {
		height: 800rpx;
		margin: 20rpx 30rpx 30rpx;
		border-radius: 16rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}

		.swiper-title {
			position: absolute;
			bottom: 15rpx;
			right: 30rpx;
			// background: rgba(255, 255, 255, 0.5);
			font-size: 24rpx;
			// padding: 5rpx 10rpx;
			border-radius: 20rpx;
			// background: rgba(51, 51, 51, 0.5);
			color: white;
			text-shadow: 1rpx 2rpx 1rpx gray;
		}
	}

	.banner {
		width: 100%;
		// height: 618rpx;
		display: block;
		margin: 0 auto;
		text-align: center;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.return {
		position: relative;
		width: fit-content;
		top: 0;
		margin-right: 20rpx;
		// margin: 20rpx 0;
	}

	.search {
		background: white;
		padding: 20rpx 30rpx 20rpx 20rpx;
		margin-bottom: 10rpx;
	}

	.content {
		margin: 0 30rpx;

		.title {
			color: #00AF91;
			font-size: 38rpx;
			margin: 32rpx 0 30rpx;
		}

		.list {
			background: white;
			border-radius: 16rpx;
			padding: 12rpx;
			margin: 30rpx 0;
			position: relative;
			justify-content: space-between;

			.cover {
				width: 184rpx;
				height: 184rpx;
				border-radius: 16rpx;
			}

			.info {
				// margin-left: 12rpx;
				width: 70%;

				.name {
					font-size: 32rpx;
					margin-bottom: 50rpx;
					overflow: hidden;
					white-space: nowrap; //内容超出不换行
					text-overflow: ellipsis;
				}

				.tabs {
					margin: 20rpx 0 20rpx;
					flex-wrap: wrap;

					view {
						background: #DAF5EF;
						border-radius: 8rpx;
						color: #00AF91;
						font-size: 24rpx;
						padding: 0 12rpx;
						margin-right: 12rpx;
						margin-bottom: 10rpx;
					}
				}

				.address {
					.ponit {
						color: #6C7A94;
						font-size: 24rpx;

						image {
							width: 24rpx;
							height: 30rpx;
							margin-right: 4rpx;
						}

						.view {
							width: 430rpx;
							overflow: hidden;
							white-space: nowrap; //内容超出不换行
							text-overflow: ellipsis;

						}
					}

				}
			}

			.add-btn {
				background: linear-gradient(to right, #12D5B4, #08C1A1, #00AF91);
				color: white;
				width: 160rpx;
				line-height: 56rpx;
				border-radius: 32rpx;
				text-align: center;
				position: absolute;
				right: 0;
				bottom: 12rpx;
			}

			.status {
				color: #E5404F;
				font-size: 32rpx;
				font-weight: bold;
				position: absolute;
				top: 10rpx;
				right: 10rpx;
			}
		}
	}
</style>